<template>
    <div class="creditEnter">
        <el-breadcrumb class="breadcrumb" separator="/">
            <el-breadcrumb-item :to="{ path: '/creditList' }">征信列表</el-breadcrumb-item>
            <el-breadcrumb-item>征信录入</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form :model="rules" :rules="rules" ref="ruleForm">
            <div class="creditEnter-content">
                <div class="title">购车人</div>
                <div>
                    <el-row class="info-row">
                        <el-col :span="8" class="info-label">
                            姓名：
                            <label class="text">{{buyer.name}}</label>
                        </el-col>
                        <el-col :span="8" class="info-label">
                            身份证号码：
                            <label class="text">{{buyer.IDCard}}</label>
                        </el-col>
                        <el-col :span="8" class="info-label">
                            婚姻状态：
                            <label class="text">{{buyer.bemarriedName}}</label>
                        </el-col>
                    </el-row>
                    <el-row class="info-row">
                        <el-col :span="8" class="info-label">
                            贷款银行：
                            <label class="text">{{buyer.bank}}</label>
                        </el-col>
                        </el-col>
                    </el-row>
                    <el-row class="info-row credit-imgs">
                        <upload class="upload" ref="carBuy"></upload>
                    </el-row>
                </div>
                <label>征信结果</label>
                <p/>
                <el-input type="textarea" :rows="3" placeholder="请输入" v-model="buyer.buyerTextarea">
                </el-input>
                <p/>
                <div class="title" v-if="this.buyer.marriage in ['0','1']">共同购车人</div>
                <div v-if="this.buyer.marriage in ['0','1']">
                    <el-row class="info-row">
                        <el-col :span="8" class="info-label">
                            姓名：
                            <label class="text">{{commonBuyer.name}}</label>
                        </el-col>
                        <el-col :span="8" class="info-label">
                            身份证号码：
                            <label class="text">{{commonBuyer.IDCard}}</label>
                        </el-col>
                    </el-row>
                    <el-row class="info-row credit-imgs">
                        <upload class="upload" ref="carBuyCommon"></upload>
                    </el-row>
                    <label>征信结果</label>
                    <p/>
                    <el-input type="textarea" :rows="3" placeholder="请输入" v-model="commonBuyerTextarea">
                    </el-input>
                    <p/>
                </div>
                <div class="title" v-show="this.sponsor.length>0">担保人</div>
                <div v-for="(vm , index) in sponsor">
                    <el-row class="info-row">
                        <el-col :span="8" class="info-label">
                            姓名：
                            <label class="text">{{vm.name}}</label>
                        </el-col>
                        <el-col :span="8" class="info-label">
                            身份证号码：
                            <label class="text">{{vm.IDCard}}</label>
                        </el-col>
                    </el-row>
                    <el-row class="info-row credit-imgs">
                        <upload class="upload" :ref="'assurePersons'+index"></upload>
                    </el-row>
                    <label>征信结果</label>
                    <p/>
                    <el-input type="textarea" :rows="3" placeholder="请输入" v-model="vm.result">
                    </el-input>
                    <p/>
                </div>
                <p/>
                <p/>
                <hr/>
                <p/>
                <p/>
                <el-button type="primary" @click="submit()">提交</el-button>
            </div>
        </el-form>
    </div>
</template>
<script>
export default {
    name: 'creditInput',
    components: {
        upload: require('../../components/other/upload')
    },
    data() {
        return {
            sEdit: false,
            disabled: true,
            buyer: {
                id: 'buyer',
                shrink: false,
                name: '',
                IDCard: '',
                marriage: '',
                bemarriedName: '',
                bank: '',
                creditQueryApplyId: '',
                result: '',
                img1: '',
                ma: '',
                orderNo: '',
                buyerTextarea: '',
            },
            commonBuyer: {
                id: 'commonBuyer',
                shrink: false,
                name: '',
                IDCard: '',
                creditQueryApplyId: '',
                result: '',
                img1: '',
            },
            sponsor: [],

            commonBuyerTextarea: '',
            rules: {
                buyerTextarea: [
                    { required: true, message: '请输入结果', trigger: 'blur' },
                    //{ validator: validaePass }
                ],
                commonBuyerTextarea: [
                    { required: true, message: '请输入结果', trigger: 'blur' },
                    //{ validator: validaePass2 }
                ]
            },
        }
    },
    methods: {
        submit() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {}
            });
            var resultArr = [];
            resultArr.push({
                creditQueryApplyId: this.buyer.creditQueryApplyId,
                creditResult: this.buyer.buyerTextarea,
            });
            if (this.buyer.marriage in ['0', '1'])
                resultArr.push({
                    creditQueryApplyId: this.commonBuyer.creditQueryApplyId,
                    creditResult: this.commonBuyerTextarea,
                });
            this.sponsor.forEach((vm) => {
                resultArr.push({
                    creditQueryApplyId: vm.creditQueryApplyId,
                    creditResult: vm.result,
                });
            });
            for (var i = 0; i < resultArr.length; i++) {
                if (!resultArr[i].creditResult) {
                    this.$message('请完善征信结果');
                    return;
                }
            }
            this.$confirm('是否确认提交?', '征信结果提交确认', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.post('/credit/creditEnter', {
                        "resultArr": resultArr,
                        "orderNo": this.buyer.orderNo
                    })
                    .then((response) => {

                        if (response.data.success) {
                            this.$message({
                                message: '征信结果提交成功！',
                                type: 'success'
                            });
                            this.$router.push({ path: '/creditList' });
                        } else {
                            this.$message.error('征信结果提交失败！');
                        }
                    })
            }).catch((error) => {});

        }

    },
    mounted() {
        this.$http.get('/credit/look/' + this.$route.query.id)
            .then((response) => {
                if (response.data.success) {
                    this.buyer.name = response.data.data.buyer.customerName;
                    this.buyer.orderNo = response.data.data.buyer.orderNo;
                    this.buyer.IDCard = response.data.data.buyer.idCard;
                    this.buyer.marriage = response.data.data.buyer.bemarried;
                    this.buyer.bemarriedName = response.data.data.buyer.bemarriedName;
                    this.buyer.bank = response.data.data.buyer.bankName;
                    this.buyer.creditQueryApplyId = response.data.data.buyer.creditQueryApplyId;
                    this.$nextTick(() => {
                        if (response.data.data.buyer.annexBatchNo) {
                            this.$refs.carBuy.id = response.data.data.buyer.annexBatchNo;
                            this.$refs.carBuy.group = 1;
                            this.$refs.carBuy.type = 0;
                            this.$refs.carBuy.getFileList(false);
                        }
                    });
                    if (this.buyer.marriage in ['0', '1']) {
                        this.commonBuyer.name = response.data.data.commonBuyer.customerName;
                        this.commonBuyer.IDCard = response.data.data.commonBuyer.idCard;
                        this.commonBuyer.creditQueryApplyId = response.data.data.commonBuyer.creditQueryApplyId;
                        this.$nextTick(() => {
                            this.marryChange = false;
                            if (response.data.data.commonBuyer.annexBatchNo) {
                                this.$refs.carBuyCommon.id = response.data.data.commonBuyer.annexBatchNo;
                                this.$refs.carBuyCommon.group = 2;
                                this.$refs.carBuyCommon.type = 0;
                                this.$refs.carBuyCommon.getFileList(false);
                            }
                        });
                    }

                    response.data.data.sponsor.forEach((vm, index) => {
                        this.sponsor.push({
                            name: vm.customerName,
                            IDCard: vm.idCard,
                            creditQueryApplyId: vm.creditQueryApplyId,
                            annexList: vm.annexList,
                            result: '',
                        });
                        this.$nextTick(() => {
                            console.log(this.$refs);
                            if (vm.annexBatchNo) {
                                this.$refs['assurePersons' + index][0].id = vm.annexBatchNo;
                                this.$refs['assurePersons' + index][0].group = 3;
                                this.$refs['assurePersons' + index][0].type = 0;
                                this.$refs['assurePersons' + index][0].getFileList(false);
                            }
                        });
                    });
                }
            })
            .catch(function(eror) {

            })

    }
}

</script>
<style lang="scss">
@import '../../assets/css/site.scss';
.creditEnter {
    padding: 0px 16px;
    position: relative;
    font-size: 14px;
    color: #475669;

    .creditEnter-content {
        background: #fff;
        position: absolute;
        top: 30px;
        bottom: 10px;
        left: 10px;
        right: 16px;
        overflow: auto;
        padding: 20px;
    }

    .breadcrumb {
        color: #99A9BF;
        font-size: 14px;
        line-height: 18px;
        margin: 18px 0px 10px 0px;
    }
    .info {
        text-align: right;
        font-size: 12px;
        color: #666666;
        .text {
            color: #2A2A2A;
        }
    }

    .info-row.credit-imgs {
        padding: 0px 20px;
        text-align: left;
        font-size: 14px;
        color: #99A9BF;
        .credit-img-each {
            width: 130px;
        }
        .credit-img {
            width: 120px;
            margin: 0 5px;
        }
    }
    .credit-button-assure {
        margin-left: 14px;
    }
}

</style>
